<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>财务和收费统计</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));
    let data1 = [
        { value: 7, name: '支出统计' },
        { value: 3, name: '收入统计' },
    ];
    let colorList = ['#17C075', '#EB973F'];

    option = {
        title: {
            text: '支出统计\n占比',
            top: '30%',
            textAlign: 'center',
            left: '50%',
            textStyle: {
                color: ' #6A7474',
                fontSize: 32,
                fontWeight: '600',
                lineHeight: 60,
            },
            subtext: '50%',
            subtextStyle: {
                color: '#021C25',
                fontSize: 32,
                fontWeight: '600',
                lineHeight: 60,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
            bottom: '0%',
            left: '35%',
            textStyle: {
                fontSize: 14,
                color: 'black',
            },
            formatter: function (name) {
                const item = data1.filter((item) => item.name === name)[0];
                return `${name}：${item.value}个`;
            },
        },
        series: [
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['60%', '80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                },
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colorList[params.dataIndex];
                        },
                    },
                },
                emphasis: {
                    label: {
                        show: true,
                        position: 'outside',
                        fontSize: '20',
                        formatter: function (params) {
                            let percent = 0;
                            let total = 0;
                            for (let i = 0; i < data1.length; i++) {
                                total += data1[i].value;
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') {
                                return params.name + '\n' + params.value + '个' + '\n' + '占百分比：' + percent + '%';
                            } else {
                                return '';
                            }
                        },
                    },
                },
                labelLine: {
                    show: false,
                },
                data: data1,
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>